(function () {
    // 数据模型
    const data = [{
        id: 1,
        count: 2,
        price: 12.5
    }, {
        id: 2,
        count: 0,
        price: 10.5
    }, {
        id: 3,
        count: 3,
        price: 8.5
    }, {
        id: 4,
        count: 0,
        price: 8
    }, {
        id: 5,
        count: 0,
        price: 14.5
    }];

    const computedBox = document.querySelector('#computedBox');

    // 基于数据驱动视图渲染
    const render = function render() {
        let str = ``,
            counts = 0,
            prices = 0,
            max = [0];

        // 拼接上部分
        str += `<div class="top">`;
        data.forEach((item, index) => {
            let { count, price } = item;
            str += `<div class="hang" index="${index}">
                <i class="minus"></i>
                <span class="pronum">${count}</span>
                <i class="add"></i>
                <span class="info">
                    单价：${price}元 &nbsp;&nbsp;
                    小计：<em>${count * price}</em>元
                </span>
            </div>`;
            // 顺便把统计也做了
            counts += count;
            prices += count * price;
            if (count > 0) max.push(price);
        });
        str += `</div>`;

        // 拼接下部分
        str += `<div class="bottom">
            商品合计：<span class="pronum">${counts}</span> &nbsp; 件
            <br>
            共花费了：<span class="pronum">${prices}</span> &nbsp; 元
            <br>
            最贵商品单价：<span class="pronum">${Math.max(...max)}</span> &nbsp; 元
        </div>`;

        computedBox.innerHTML = str;
    };
    render();

    // 视图操作控制数据的更新
    // 点击#computedBox中任意一个元素，都会让#computedBox的点击行为触发「绑定的方法会执行」；ev.target获取点击的事件源(也就是点击的是谁)！
    computedBox.onclick = function (ev) {
        let target = ev.target,
            targetTag = target.tagName, //获取事件源的标签名「大写，例如：“I”」
            targetSty = target.className; //获取事件源的样式类名
        if (targetTag !== "I") return;
        // 点击的是加减按钮：我们获取所在行的索引，再去DATA中找到要修改的项，修改count数据
        let index = +target.parentNode.getAttribute('index'),
            item = data[index];
        if (targetSty === 'minus') {
            item.count--;
            if (item.count < 0) item.count = 0;
        } else {
            item.count++;
        }
        // 修改完数据，重新让视图渲染
        render();
    };
})();